<template>
    <el-dialog
        :before-close="resetForm"
        :close-on-click-modal="false"
        :visible.sync="visible"
        append-to-body
        title="查看文章发布详情信息"
        top="2vh"
        width="1060px"
    >
        <div class="edit_page_div">
            <div class="content_title">{{ form.articleName }}({{ form.articleCode }})</div>
            <div class="region_block" style="width: 100%; height: 400px; font-size: 16px;">
                {{ form.articleContent }}
            </div>
            <div class="edit_button">
                <el-button v-loading.fullscreen.lock="loading" type="text" @click="supportData">点赞（{{ form.supportNum }}）</el-button>
                <el-button v-loading.fullscreen.lock="loading" type="text" @click="evaluateData()">评论（{{ form.evaluateNum }}）</el-button>
            </div>
            <div class="column_title" style="width: 100%">
                <div class="column_name">最火评论</div>
                <el-button type="text" style="float: right;" @click="showEvaluate=true"><i class="el-icon-more"></i></el-button>
            </div>
            <div class="region_block" style="width: 100%; height: 200px">
                <div v-for="item in form.evaluateList" class="form_list">
                    <div class="form_title">
                        <span> {{ item.userName }} </span>
                        <span>点赞{{ item.supportNum }}个</span>
                        <span style="font-size: 12px;"> ({{ item.createTime }})</span>
                    </div>
                    <div class="form_content">{{ item.evaluateContent }}</div>
                </div>
            </div>
        </div>
        <evaluate-list :visible.sync="showEvaluate" :id="id" @refreshList="getData"></evaluate-list>
    </el-dialog>
</template>

<script>
import EvaluateList from "@/views/system/news/newsArticle/component/evaluateList.vue";

export default {
    name: "newsArticleDetail",
    components: {EvaluateList},
    props: {
        visible: Boolean,
        id: String,
    },
    data() {
        return {
            loading: false,
            showEvaluate: false,

            form: {
                articleCode: '',
                articleName: '',
                articleContent: '',
                supportNum: '',
                evaluateNum: '',
                evaluateList: [],
                evaluateTopList: [],
            },
        }
    },
    watch: {
        visible(newVal) {
            if (newVal) {
                this.getData();
            }
        }
    },
    methods: {
        getData() {
            this.loading = true;
            this.$axios.get("/CHILD_SYSTEM/newsArticle/getOneEntity/" + this.id).then(res => {
                this.form = res.data;
            }).finally(() => {
                this.loading = false;
            })
        },
        supportData() {
            this.loading = true;
            this.$axios.post("/CHILD_SYSTEM/newsArticle/support/" + this.id).then(res => {
                this.getData();
                this.$message.success(res.message);
            }).finally(() => {
                this.loading = false;
            })
        },
        evaluateData (parentsId) {
            this.$prompt('评论信息', '回复评论', {
                confirmButtonText: '保存',
            }).then(({ value }) => {
                this.loading = true;
                var form = new Object();
                form.articleId = this.id;
                form.parentsId = parentsId;
                form.evaluateContent = value;
                this.$axios.post("/CHILD_SYSTEM/newsArticleEvaluate/insert", form).then(res => {
                    this.getData();
                    this.$message.success(res.message);
                }).finally(() => {
                    this.loading = false;
                })
            })
        },
        resetForm() {
            this.$emit('update:visible', false);
            this.$emit('refreshList');
        },
    }
}
</script>

<style lang="scss">

</style>